<template>
  <q-dialog class="add-edit-shift-dialog-new" v-model="show" persistent>
    <q-card v-drag style="min-width: 800px">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">{{state === 'add' ? '添加班制' : '编辑班制'}}</div>
      </q-card-section>
      <q-form ref="form" @reset="reset"  class="q-gutter-md dialog-content" greedy>
        <q-card-section class="padding-r-20 padding-t-20 padding-l-20">
          <div style="display: flex; justify-content: space-between">
            <q-select
              v-if="state === 'add'"
              style="width: 350px"
              v-model="form.workshop"
              :options="newWorkshopOpt"
              dense
              options-dense
              emit-value
              map-options
              outlined
              :rules="[
                    val => val !== undefined && val !== null && val !== '' || '请选择车间',
                  ]"
            >
              <template v-slot:no-option>
                <div class="no-option"/>
              </template>
              <template v-slot:before>
                <label class="text-right name label-width">
                  <span class="text-red">*</span>
                  <span>车间名称:</span>
                </label>
              </template>
            </q-select>
            <div v-else class="font-16">
              车间名称: {{workshopOptObj[form.workshop]}}
            </div>
            <q-select
              v-if="state === 'add'"
              @input="changeMode"
              style="width: 350px"
              v-model="form.classMode"
              :options="classModeOptions"
              dense
              options-dense
              emit-value
              map-options
              outlined
              :rules="[
                    val => (val !== undefined && val !== null) != '' || '请选择班制模式',
                  ]"
            >
              <template v-slot:no-option>
                <div class="no-option"/>
              </template>
              <template v-slot:before>
                <label class="text-right name label-width">
                  <span class="text-red">*</span>
                  <span>班制模式:</span>
                </label>
              </template>
            </q-select>
            <div v-else class="font-16" style="height: 32px">
              班制模式: {{classModeObj[form.classMode]}}
            </div>
          </div>
          <div>
            <q-list bordered separator>
              <q-item style="text-align: center">
                <q-item-section>轮班名称</q-item-section>
                <q-item-section>开始时间</q-item-section>
                <q-item-section>结束时间</q-item-section>
              </q-item>

              <!--单班制-->
              <q-item style="text-align: center">
                <q-item-section>
                  <q-input
                    v-model.trim="form.shiftName1"
                    dense
                    outlined
                    :rules="[
                    val => val != '' || '请输入轮班名称',
                    val => val.length <= 6 || '输入长度超过限制',
                  ]"
                  >
                    <template v-slot:before>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-input>
                </q-item-section>

                <q-item-section>
                  <q-field
                    class="field"
                    dense
                    ref="startTime1"
                    borderless
                    no-error-icon
                    v-model="form.startTime1"
                    :rules="[
                      val => /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeStart1
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.startTime1"
                      type="time" format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    />
                  </q-field>
                </q-item-section>
                <q-item-section>
                  <q-field
                    class="field"
                    dense
                    ref="endTime1"
                    borderless
                    no-error-icon
                    v-model="form.endTime1"
                    :rules="[
                      val => /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeEnd1
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.endTime1"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox @input="resetValidate('endTime1')" v-model="form.nextEnd1"
                                    label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
              </q-item>

              <!--两班制-->
              <q-item style="text-align: center" v-if="state === 'add' || Number(form.classMode) >= 2">
                <q-item-section>
                  <q-input
                    :disable="form.classMode === '1'"
                    v-model.trim="form.shiftName2"
                    dense
                    outlined
                    :rules="[
                      val => val != ''|| form.classMode === '1' || '请输入轮班名称',
                      val => form.classMode === '1' || val.length <= 20 || '输入长度超过限制',
                    ]">
                    <template v-slot:before>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-input>
                </q-item-section>
                <q-item-section>
                  <q-field
                    :disable="form.classMode === '1'"
                    class="field"
                    dense
                    ref="startTime2"
                    borderless
                    no-error-icon
                    v-model="form.startTime2"
                    :rules="[
                      val => form.classMode === '1' || /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeStart2
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.startTime2"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox :disable="nextStartDisable2"
                                    @input="resetValidate('startTime2')" v-model="form.nextStart2"
                                    label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
                <q-item-section>
                  <q-field
                    :disable="form.classMode === '1'"
                    class="field"
                    dense
                    ref="endTime2"
                    borderless
                    no-error-icon
                    v-model="form.endTime2"
                    :rules="[
                      val => form.classMode === '1' || /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeEnd2
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.endTime2"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox :disable="nextEndDisable2" @input="resetValidate('endTime2')"
                                    v-model="form.nextEnd2" label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
              </q-item>

              <!--三班制-->
              <q-item style="text-align: center" v-if="state === 'add' || Number(form.classMode) >= 3">
                <q-item-section>
                  <q-input
                    :disable="form.classMode === '1' || form.classMode === '2'"
                    v-model.trim="form.shiftName3"
                    dense
                    outlined
                    :rules="[
                      val => val != '' || form.classMode === '1' || form.classMode === '2' || '请输入轮班名称',
                      val => form.classMode === '1' || form.classMode === '2' || val.length <= 20 || '输入长度超过限制',
                    ]">
                    <template v-slot:before>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-input>
                </q-item-section>
                <q-item-section>
                  <q-field
                    :disable="form.classMode === '1' || form.classMode === '2'"
                    class="field"
                    dense
                    ref="startTime3"
                    borderless
                    no-error-icon
                    v-model="form.startTime3"
                    :rules="[
                      val => (form.classMode === '1' || form.classMode === '2') || /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeStart3
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.startTime3"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox :disable="nextStartDisable3"
                                    @input="resetValidate('startTime3')" v-model="form.nextStart3"
                                    label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
                <q-item-section>
                  <q-field
                    :disable="form.classMode === '1' || form.classMode === '2'"
                    class="field"
                    dense
                    ref="endTime3"
                    borderless
                    no-error-icon
                    v-model="form.endTime3"
                    :rules="[
                      val => (form.classMode === '1' || form.classMode === '2') || /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeEnd3
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.endTime3"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox :disable="nextEndDisable3" @input="resetValidate('endTime3')"
                                    v-model="form.nextEnd3" label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
              </q-item>

              <!--四班制-->
              <q-item style="text-align: center" v-if="state === 'add' || Number(form.classMode) >= 4">
                <q-item-section>
                  <q-input
                    :disable="form.classMode !== '4'"
                    v-model.trim="form.shiftName4"
                    dense
                    outlined
                    :rules="[
                      val => val != '' || form.classMode !== '4' || '请输入轮班名称',
                      val => form.classMode !== '4' || val.length <= 20 || '输入长度超过限制',
                    ]">
                    <template v-slot:before>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                  </q-input>
                </q-item-section>
                <q-item-section>
                  <q-field
                    :disable="form.classMode !== '4'"
                    class="field"
                    dense
                    ref="startTime4"
                    borderless
                    no-error-icon
                    v-model="form.startTime4"
                    :rules="[
                      val => form.classMode !== '4' || /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeStart4
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.startTime4"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox :disable="nextStartDisable4"
                                    @input="resetValidate('startTime4')" v-model="form.nextStart4"
                                    label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
                <q-item-section>
                  <q-field
                    :disable="form.classMode !== '4'"
                    class="field"
                    dense
                    ref="endTime4"
                    borderless
                    no-error-icon
                    v-model="form.endTime4"
                    :rules="[
                      val => form.classMode !== '4' || /^(?:[01]\d|2[0-3])(?::[0-5][05])$/.test(val) || '请选择时间',
                      judgeTimeEnd4
                    ]"
                  >
                    <template v-slot:prepend>
                      <label class="text-right name" style="width: 5px">
                        <span class="text-red">*</span>
                      </label>
                    </template>
                    <date-picker
                      style="width: 100%"
                      v-model="form.endTime4"
                      type="time"
                      format="HH:mm"
                      value-type="format"
                      placeholder="选择时间"
                      :minute-step="5"
                      :clearable="false" :editable="false"
                    >
                      <template v-slot:header="{ emit }">
                        <q-checkbox :disable="nextEndDisable4" @input="resetValidate('endTime4')"
                                    v-model="form.nextEnd4" label="次日" />
                      </template>
                    </date-picker>
                  </q-field>
                </q-item-section>
              </q-item>
            </q-list>
            <yz-input
              class="name-auto margin-t-20"
              v-model.trim="form.comments"
              inputType="textarea"
              :maxlength="100"
              title="备注"
            />
          </div>
        </q-card-section>
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
          <q-btn unelevated label="确认" color="primary" @click="submit"/>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
import { getShiftsMode } from 'src/boot/factory/factory-calendar'

export default {
  name: 'add-edit-shift-dialog-new',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    state: {
      type: String
    },
    workshopOpt: {
      type: Array
    }
  },
  computed: {
    classModeObj () {
      const obj = {}
      this.classModeOptions.forEach(item => {
        obj[item.value] = item.label
      })
      return obj
    },
    workshopOptObj () {
      const obj = {}
      this.workshopOpt.forEach(item => {
        obj[item.value] = item.label
      })
      return obj
    },
    // 车间下拉框去掉全部
    newWorkshopOpt () {
      return this.workshopOpt.filter(item => item.label !== '全部')
    }
  },
  data () {
    return {
      workshopOptions: [],
      time: '',
      form: {
        id: '', // id
        shiftId1: '',
        shiftId2: '',
        shiftId3: '',
        shiftId4: '',
        shiftName1: '', // 轮班名称1
        shiftName2: '', // 轮班名称2
        shiftName3: '', // 轮班名称3
        shiftName4: '', // 轮班名称4
        startTime1: '', // 开始时间1
        startTime2: '', // 开始时间2
        startTime3: '', // 开始时间3
        startTime4: '', // 开始时间4
        endTime1: '', // 结束时间1
        endTime2: '', // 结束时间2
        endTime3: '', // 结束时间3
        endTime4: '', // 结束时间4
        nextStart1: false, // 开始时间1是否是次日
        nextStart2: false, // 开始时间2是否是次日
        nextStart3: false, // 开始时间3是否是次日
        nextStart4: false, // 开始时间4是否是次日
        nextEnd1: false, // 结束时间是否是次日
        nextEnd2: false, // 结束时间是否是次日
        nextEnd3: false, // 结束时间是否是次日
        nextEnd4: false, // 结束时间是否是次日
        comments: '', // 备注
        classMode: null, // 班制模式
        workshop: '' // 车间
      },
      nextStartDisable2: false, // 开始时间2是否是次日按钮禁止点击
      nextStartDisable3: false, // 开始时间3是否是次日按钮禁止点击
      nextStartDisable4: false, // 开始时间4是否是次日按钮禁止点击
      nextEndDisable2: false, // 结束时间是否是次日按钮禁止点击
      nextEndDisable3: false, // 结束时间是否是次日按钮禁止点击
      nextEndDisable4: false, // 结束时间是否是次日按钮禁止点击
      classModeOptions: [] // 班制模式
    }
  },
  created () {
    this.init()
  },
  watch: {
    workshopOpt (val) {
      this.workshopOptions = val
    },
    'form.nextEnd1' () {
      this.form.nextStart2 = this.form.nextEnd1

      this.nextStartDisable2 = this.form.nextEnd1
      this.nextEndDisable2 = this.form.nextEnd1
      this.nextStartDisable3 = this.form.nextEnd1
      this.nextEndDisable3 = this.form.nextEnd1
      this.nextStartDisable4 = this.form.nextEnd1
      this.nextEndDisable4 = this.form.nextEnd1
    },
    'form.nextStart2' () {
      this.form.nextEnd2 = this.form.nextStart2

      this.nextEndDisable2 = this.form.nextStart2
      this.nextStartDisable3 = this.form.nextStart2
      this.nextEndDisable3 = this.form.nextStart2
      this.nextStartDisable4 = this.form.nextStart2
      this.nextEndDisable4 = this.form.nextStart2
    },
    'form.nextEnd2' () {
      this.form.nextStart3 = this.form.nextEnd2

      // 设置禁用
      this.nextStartDisable3 = this.form.nextEnd2
      this.nextEndDisable3 = this.form.nextEnd2
      this.nextStartDisable4 = this.form.nextEnd2
      this.nextEndDisable4 = this.form.nextEnd2
    },
    'form.nextStart3' () {
      this.form.nextEnd3 = this.form.nextStart3

      // 设置禁用
      this.nextEndDisable3 = this.form.nextStart3
      this.nextStartDisable4 = this.form.nextStart3
      this.nextEndDisable4 = this.form.nextStart3
    },
    'form.nextEnd3' () {
      this.form.nextStart4 = this.form.nextEnd3

      // 设置禁用
      this.nextStartDisable4 = this.form.nextEnd3
      this.nextEndDisable4 = this.form.nextEnd3
    },
    'form.nextStart4' () {
      this.form.nextEnd4 = this.form.nextStart4

      // 设置禁用
      this.nextEndDisable4 = this.form.nextStart4
    }
  },
  methods: {
    init () {
      getShiftsMode().then(res => {
        // this.classModeOptions = res.data
        res.data.forEach(item => {
          this.classModeOptions.push({
            value: item.value.toString(),
            label: item.label
          })
        })
        this.form.classMode = this.classModeOptions[0].value
      })
    },
    // 编辑填充表格
    assignment (val) {
      this.reset()
      this.form.classMode = val.modeCode
      this.form.workshop = val.workShopId
      this.form.comments = val.comments
      this.form.id = val.id
      if (val.modeCode === '1') {
        this.form.shiftId1 = val.list[0].id
        this.form.shiftName1 = val.list[0].name
        this.form.startTime1 = val.list[0].startTime
        this.form.endTime1 = val.list[0].endTime
      } else if (val.modeCode === '2') {
        this.form.shiftId1 = val.list[0].id
        this.form.shiftName1 = val.list[0].name
        this.form.startTime1 = val.list[0].startTime
        this.form.endTime1 = val.list[0].endTime
        this.form.shiftId2 = val.list[1].id
        this.form.shiftName2 = val.list[1].name
        this.form.startTime2 = val.list[1].startTime
        this.form.endTime2 = val.list[1].endTime
      } else if (val.modeCode === '3') {
        this.form.shiftId1 = val.list[0].id
        this.form.shiftName1 = val.list[0].name
        this.form.startTime1 = val.list[0].startTime
        this.form.endTime1 = val.list[0].endTime
        this.form.shiftId2 = val.list[1].id
        this.form.shiftName2 = val.list[1].name
        this.form.startTime2 = val.list[1].startTime
        this.form.endTime2 = val.list[1].endTime
        this.form.shiftId3 = val.list[2].id
        this.form.shiftName3 = val.list[2].name
        this.form.startTime3 = val.list[2].startTime
        this.form.endTime3 = val.list[2].endTime
      } else {
        this.form.shiftId1 = val.list[0].id
        this.form.shiftName1 = val.list[0].name
        this.form.startTime1 = val.list[0].startTime
        this.form.endTime1 = val.list[0].endTime
        this.form.shiftId2 = val.list[1].id
        this.form.shiftName2 = val.list[1].name
        this.form.startTime2 = val.list[1].startTime
        this.form.endTime2 = val.list[1].endTime
        this.form.shiftId3 = val.list[2].id
        this.form.shiftName3 = val.list[2].name
        this.form.startTime3 = val.list[2].startTime
        this.form.endTime3 = val.list[2].endTime
        this.form.shiftId4 = val.list[3].id
        this.form.shiftName4 = val.list[3].name
        this.form.startTime4 = val.list[3].startTime
        this.form.endTime4 = val.list[3].endTime
      }
      if (val.list[0] && val.list[0].isEndTimeCross) {
        this.form.nextEnd1 = val.list[0].isEndTimeCross
      } else if (val.list[1] && val.list[1].isStartTimeCross) {
        this.form.nextStart2 = val.list[1].isStartTimeCross
      } else if (val.list[1] && val.list[1].isEndTimeCross) {
        this.form.nextEnd2 = val.list[1].isEndTimeCross
      } else if (val.list[2] && val.list[2].isStartTimeCross) {
        this.form.nextStart3 = val.list[2].isStartTimeCross
      } else if (val.list[2] && val.list[2].isEndTimeCross) {
        this.form.nextEnd3 = val.list[2].isEndTimeCross
      } else if (val.list[3] && val.list[3].isStartTimeCross) {
        this.form.nextStart4 = val.list[3].isStartTimeCross
      } else if (val.list[3] && val.list[3].isEndTimeCross) {
        this.form.nextEnd4 = val.list[3].isEndTimeCross
      }
    },

    // 清空表单
    reset () {
      this.form.shiftName1 = ''
      this.form.shiftName2 = ''
      this.form.shiftName3 = ''
      this.form.shiftName4 = ''
      this.form.startTime1 = ''
      this.form.startTime2 = ''
      this.form.startTime3 = ''
      this.form.startTime4 = ''
      this.form.endTime1 = ''
      this.form.endTime2 = ''
      this.form.endTime3 = ''
      this.form.endTime4 = ''
      this.form.nextStart1 = false
      this.form.nextStart2 = false
      this.form.nextStart3 = false
      this.form.nextStart4 = false
      this.form.nextEnd1 = false
      this.form.nextEnd2 = false
      this.form.nextEnd3 = false
      this.form.nextEnd4 = false
      this.form.comments = ''
      this.form.classMode = '1'
      this.form.workshop = ''
    },

    // 切换班制
    changeMode () {
      this.$refs.form.resetValidation()
      if (this.form.classMode === '1') {
        this.form.shiftName2 = ''
        this.form.shiftName3 = ''
        this.form.shiftName4 = ''
        this.form.startTime2 = ''
        this.form.startTime3 = ''
        this.form.startTime4 = ''
        this.form.endTime2 = ''
        this.form.endTime3 = ''
        this.form.endTime4 = ''
      } else if (this.form.classMode === '2') {
        this.form.shiftName3 = ''
        this.form.shiftName4 = ''
        this.form.startTime3 = ''
        this.form.startTime4 = ''
        this.form.endTime3 = ''
        this.form.endTime4 = ''
      } else if (this.form.classMode === '3') {
        this.form.shiftName4 = ''
        this.form.startTime4 = ''
        this.form.endTime4 = ''
      }
    },

    // 提交表单
    submit () {
      this.$refs.form.validate(true).then(result => {
        if (result) {
          this.$emit('submit', this.state, this.form)
        } else {
          // 包括单班制
          if (this.form.classMode >= 1) {
            if (this.judgeTimeStart1() !== true) {
              this.$refs.startTime1.validate()
              // return
            }
            if (this.judgeTimeEnd1() !== true) {
              this.$refs.endTime1.validate()
              return
            }
          }
          // 包括两班制
          if (this.form.classMode >= 2) {
            if (this.judgeTimeStart2() !== true) {
              this.$refs.startTime2.validate()
              return
            }
            if (this.judgeTimeEnd2() !== true) {
              this.$refs.endTime2.validate()
              return
            }
          }
          // 包括三班制
          if (this.form.classMode >= 3) {
            if (this.judgeTimeStart3() !== true) {
              this.$refs.startTime3.validate()
              return
            }
            if (this.judgeTimeEnd3() !== true) {
              this.$refs.endTime3.validate()
              return
            }
          }
          // 包括三班制
          if (this.form.classMode >= 4) {
            if (this.judgeTimeStart4() !== true) {
              this.$refs.startTime4.validate()
              return
            }
            if (this.judgeTimeEnd4() !== true) {
              this.$refs.endTime4.validate()
            }
          }
        }
      })
      // this.$emit('submit', this.state, this.form)
    },

    // 验证时间
    // 第一个开始时间
    judgeTimeStart1 () {
      if (this.form.endTime1 === null || this.form.endTime1.length === 0) {
        this.$refs.startTime2 && this.$refs.startTime2.validate()
        this.$refs.startTime3 && this.$refs.startTime3.validate()
        this.$refs.startTime4 && this.$refs.startTime4.validate()
        this.$refs.endTime1 && this.$refs.endTime1.validate()
        this.$refs.endTime2 && this.$refs.endTime2.validate()
        this.$refs.endTime3 && this.$refs.endTime3.validate()
        this.$refs.endTime4 && this.$refs.endTime4.validate()
        return true
      }
      // this.$refs.startTime2.validate()
      // this.$refs.startTime3.validate()
      // this.$refs.startTime4.validate()
      // this.$refs.endTime1.validate()
      // this.$refs.endTime2.validate()
      // this.$refs.endTime3.validate()
      // this.$refs.endTime4.validate()

      const preifx = '1970-02-01T'
      const preifx1 = '1970-02-02T'
      const suffix = 'Z'

      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const endStr1 = this.form.nextEnd1 ? `${preifx1}${this.form.endTime1}${suffix}` : `${preifx}${this.form.endTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      const endTime1 = new Date(endStr1)
      if (startTime1.getTime() >= endTime1.getTime()) {
        return '开始时间需小于结束时间'
      }
      this.$refs.endTime1.resetValidation()

      // 两班制判断
      if (Number(this.form.classMode) >= 2) {
        const startStr2 = this.form.nextStart2 ? `${preifx1}${this.form.startTime2}${suffix}` : `${preifx}${this.form.startTime2}${suffix}`
        const startTime2 = new Date(startStr2)
        if (startTime2.getTime() - startTime1.getTime() > 3600000 * 24) {
          return '同一个轮班的总时长不允许超过24时'
        }
        this.$refs.startTime2.resetValidation()

        const endStr2 = this.form.nextEnd2 ? `${preifx1}${this.form.endTime2}${suffix}` : `${preifx}${this.form.endTime2}${suffix}`
        const endTime2 = new Date(endStr2)
        if (endTime2.getTime() - startTime1.getTime() > 3600000 * 24) {
          return '同一个轮班的总时长不允许超过24时'
        }
        this.$refs.endTime2.resetValidation()
      }
      // 三班制
      if (Number(this.form.classMode) >= 3) {
        const startStr3 = this.form.nextStart3 ? `${preifx1}${this.form.startTime3}${suffix}` : `${preifx}${this.form.startTime3}${suffix}`
        const startTime3 = new Date(startStr3)
        if (startTime3.getTime() - startTime1.getTime() > 3600000 * 24) {
          return '同一个轮班的总时长不允许超过24时'
        }
        this.$refs.startTime3.resetValidation()

        const endStr3 = this.form.nextEnd3 ? `${preifx1}${this.form.endTime3}${suffix}` : `${preifx}${this.form.endTime3}${suffix}`
        const endTime3 = new Date(endStr3)
        if (endTime3.getTime() - startTime1.getTime() > 3600000 * 24) {
          return '同一个轮班的总时长不允许超过24时'
        }
        this.$refs.endTime3.resetValidation()
      }
      // 四班制
      if (Number(this.form.classMode) >= 4) {
        const startStr4 = this.form.nextStart4 ? `${preifx1}${this.form.startTime4}${suffix}` : `${preifx}${this.form.startTime4}${suffix}`
        const startTime4 = new Date(startStr4)
        if (startTime4.getTime() - startTime1.getTime() > 3600000 * 24) {
          return '同一个轮班的总时长不允许超过24时'
        }
        this.$refs.startTime4.resetValidation()

        const endStr4 = this.form.nextEnd4 ? `${preifx1}${this.form.endTime4}${suffix}` : `${preifx}${this.form.endTime4}${suffix}`
        const endTime4 = new Date(endStr4)
        if (endTime4.getTime() - startTime1.getTime() > 3600000 * 24) {
          return '同一个轮班的总时长不允许超过24时'
        }
        this.$refs.endTime4.resetValidation()
      }

      return true
    },
    // 第一个结束时间
    judgeTimeEnd1 () {
      // 与当前开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }

      const preifx = '1970-02-01T'
      const preifx1 = '1970-02-02T'
      const suffix = 'Z'

      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const endStr1 = this.form.nextEnd1 ? `${preifx1}${this.form.endTime1}${suffix}` : `${preifx}${this.form.endTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      const endTime1 = new Date(endStr1)
      if (startTime1.getTime() >= endTime1.getTime()) {
        return '开始时间需小于结束时间'
      }
      if (endTime1.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1.resetValidation()

      // 与下一个开始时间对比
      if (this.form.startTime2 === null || this.form.startTime2.length === 0) {
        return true
      }
      const startStr2 = this.form.nextStart2 ? `${preifx1}${this.form.startTime2}${suffix}` : `${preifx}${this.form.startTime2}${suffix}`
      const startTime2 = new Date(startStr2)
      if (startTime2.getTime() < endTime1.getTime()) {
        return '次班开始时间不能早于前一班结束时间'
      }
      this.$refs.startTime2.resetValidation()

      return true
    },

    // 第二个开始时间
    judgeTimeStart2 () {
      // 与上一个结束时间对比
      if (this.form.endTime1 === null || this.form.endTime1.length === 0) {
        this.$refs.endTime1.validate()
        return true
      }
      const preifx = '1970-01-01T'
      const preifx1 = '1970-01-02T'
      const suffix = 'Z'

      const startStr2 = this.form.nextStart2 ? `${preifx1}${this.form.startTime2}${suffix}` : `${preifx}${this.form.startTime2}${suffix}`
      const endStr1 = this.form.nextEnd1 ? `${preifx1}${this.form.endTime1}${suffix}` : `${preifx}${this.form.endTime1}${suffix}`
      const startTime2 = new Date(startStr2)
      const endTime1 = new Date(endStr1)
      if (startTime2.getTime() < endTime1.getTime()) {
        return '次班开始时间不能早于前一班结束时间'
      }
      this.$refs.endTime1.resetValidation()

      // 与第一个开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }
      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      if (startTime2.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1.resetValidation()

      // 与这一轮班结束时间对比
      if (this.form.endTime2 === null || this.form.endTime2.length === 0) {
        return true
      }
      const endStr2 = this.form.nextEnd2 ? `${preifx1}${this.form.endTime2}${suffix}` : `${preifx}${this.form.endTime2}${suffix}`
      const endTime2 = new Date(endStr2)
      if (startTime2.getTime() > endTime2.getTime()) {
        return '开始时间需小于结束时间'
      }
      // this.$refs.endTime2.resetValidation()

      return true
    },
    // 第二个结束时间
    judgeTimeEnd2 () {
      // 与当前开始时间对比
      if (this.form.startTime2 === null || this.form.startTime2.length === 0) {
        // this.resetValidate('startTime2')
        this.$refs.startTime2.validate()
        // this.$refs.startTime3.validate()
        return true
      }
      const preifx = '1970-01-01T'
      const preifx1 = '1970-01-02T'
      const suffix = 'Z'

      const startStr2 = this.form.nextStart2 ? `${preifx1}${this.form.startTime2}${suffix}` : `${preifx}${this.form.startTime2}${suffix}`
      const endStr2 = this.form.nextEnd2 ? `${preifx1}${this.form.endTime2}${suffix}` : `${preifx}${this.form.endTime2}${suffix}`
      const startTime2 = new Date(startStr2)
      const endTime2 = new Date(endStr2)
      if (startTime2.getTime() >= endTime2.getTime()) {
        return '开始时间需小于结束时间'
      }
      this.$refs.startTime2.resetValidation()

      // 与第一个开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }
      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      console.log(`同一个轮班的总时长不允许超过24时:${endTime2.getTime() - startTime1.getTime() > 3600000 * 24}`)
      if (endTime2.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1.resetValidation()

      // 与下一个开始时间对比
      if (this.form.startTime3 === null || this.form.startTime3.length === 0) {
        return true
      }
      const startStr3 = this.form.nextStart3 ? `${preifx1}${this.form.startTime3}${suffix}` : `${preifx}${this.form.startTime3}${suffix}`
      const startTime3 = new Date(startStr3)
      if (startTime3.getTime() < endTime2.getTime()) {
        return '次班开始时间不能早于前一班结束时间'
      }
      this.$refs.startTime3.resetValidation()

      return true
    },

    // 第三个开始时间
    judgeTimeStart3 () {
      // 与上一个结束时间对比
      if (this.form.endTime2 === null || this.form.endTime2.length === 0) {
        // this.resetValidate('endTime2')
        this.$refs.endTime2.validate()
        // this.$refs.endTime3.validate()
        return true
      }
      const preifx = '1970-01-01T'
      const preifx1 = '1970-01-02T'
      const suffix = 'Z'

      const startStr3 = this.form.nextStart3 ? `${preifx1}${this.form.startTime3}${suffix}` : `${preifx}${this.form.startTime3}${suffix}`
      const endStr2 = this.form.nextEnd2 ? `${preifx1}${this.form.endTime2}${suffix}` : `${preifx}${this.form.endTime2}${suffix}`
      const startTime3 = new Date(startStr3)
      const endTime2 = new Date(endStr2)
      if (startTime3.getTime() < endTime2.getTime()) {
        return '次班的开始时间不能早于前一班的结束时间'
      }
      this.$refs.endTime2 && this.$refs.endTime2.resetValidation()

      // 与第一个开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }
      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      if (startTime3.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1 && this.$refs.startTime1.resetValidation()

      // 与这一轮班结束时间对比
      if (this.form.endTime3 === null || this.form.endTime3.length === 0) {
        return true
      }
      const endStr3 = this.form.nextEnd3 ? `${preifx1}${this.form.endTime3}${suffix}` : `${preifx}${this.form.endTime3}${suffix}`
      const endTime3 = new Date(endStr3)
      if (startTime3.getTime() > endTime3.getTime()) {
        return '开始时间需小于结束时间'
      }
      console.log('我是start3')
      this.$refs.endTime3 && this.$refs.endTime3.resetValidation()

      return true
    },
    // 第三个结束时间
    judgeTimeEnd3 () {
      console.log('我是end3')
      // 与当前开始时间对比
      if (this.form.startTime3 === null || this.form.startTime3.length === 0) {
        // this.resetValidate('startTime3')
        this.$refs.startTime3.validate()
        // this.$refs.startTime4.validate()
        return true
      }
      const preifx = '1970-01-01T'
      const preifx1 = '1970-01-02T'
      const suffix = 'Z'

      const startStr3 = this.form.nextStart3 ? `${preifx1}${this.form.startTime3}${suffix}` : `${preifx}${this.form.startTime3}${suffix}`
      const endStr3 = this.form.nextEnd3 ? `${preifx1}${this.form.endTime3}${suffix}` : `${preifx}${this.form.endTime3}${suffix}`
      const startTime3 = new Date(startStr3)
      const endTime3 = new Date(endStr3)
      if (startTime3.getTime() >= endTime3.getTime()) {
        return '开始时间需小于结束时间'
      }
      this.$refs.startTime3 && this.$refs.startTime3.resetValidation()

      // 与第一个开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }
      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      if (endTime3.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1 && this.$refs.startTime1.resetValidation()

      // 与下一个开始时间对比
      if (this.form.startTime3 === null || this.form.startTime3.length === 0) {
        return true
      }
      const startStr4 = this.form.nextStart4 ? `${preifx1}${this.form.startTime4}${suffix}` : `${preifx}${this.form.startTime4}${suffix}`
      const startTime4 = new Date(startStr4)
      if (startTime4.getTime() < endTime3.getTime()) {
        return '次班开始时间不能早于前一班结束时间'
      }
      this.$refs.startTime4 && this.$refs.startTime4.resetValidation()

      return true
    },

    // 第四个开始时间
    judgeTimeStart4 () {
      // 与上一个结束时间对比
      if (this.form.endTime3 === null || this.form.endTime3.length === 0) {
        // this.resetValidate('endTime3')
        this.$refs.endTime3.validate()
        // this.$refs.endTime4.validate()
        return true
      }
      const preifx = '1970-01-01T'
      const preifx1 = '1970-01-02T'
      const suffix = 'Z'

      const startStr4 = this.form.nextStart4 ? `${preifx1}${this.form.startTime4}${suffix}` : `${preifx}${this.form.startTime4}${suffix}`
      const endStr3 = this.form.nextEnd3 ? `${preifx1}${this.form.endTime3}${suffix}` : `${preifx}${this.form.endTime3}${suffix}`
      const startTime4 = new Date(startStr4)
      const endTime3 = new Date(endStr3)
      if (startTime4.getTime() < endTime3.getTime()) {
        return '次班的开始时间不能早于前一班的结束时间'
      }
      this.$refs.endTime3 && this.$refs.endTime3.resetValidation()

      // 与第一个开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }
      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      if (startTime4.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1 && this.$refs.startTime1.resetValidation()

      // 与这一轮班结束时间对比
      if (this.form.endTime4 === null || this.form.endTime4.length === 0) {
        return true
      }
      const endStr4 = this.form.nextEnd4 ? `${preifx1}${this.form.endTime4}${suffix}` : `${preifx}${this.form.endTime4}${suffix}`
      const endTime4 = new Date(endStr4)
      if (startTime4.getTime() > endTime4.getTime()) {
        return '开始时间需小于结束时间'
      }
      this.$refs.endTime4 && this.$refs.endTime4.resetValidation()

      return true
    },
    // 第四个结束时间
    judgeTimeEnd4 () {
      // 与当前开始时间对比
      if (this.form.startTime4 === null || this.form.startTime4.length === 0) {
        // this.resetValidate('startTime4')
        this.$refs.startTime4.validate()
        return true
      }
      this.$refs.startTime1.validate()
      const preifx = '1970-01-01T'
      const preifx1 = '1970-01-02T'
      const suffix = 'Z'

      const startStr4 = this.form.nextStart4 ? `${preifx1}${this.form.startTime4}${suffix}` : `${preifx}${this.form.startTime4}${suffix}`
      const endStr4 = this.form.nextEnd4 ? `${preifx1}${this.form.endTime4}${suffix}` : `${preifx}${this.form.endTime4}${suffix}`
      const startTime4 = new Date(startStr4)
      const endTime4 = new Date(endStr4)
      if (startTime4.getTime() >= endTime4.getTime()) {
        return '开始时间需小于结束时间'
      }
      this.$refs.startTime4 && this.$refs.startTime4.resetValidation()

      // 与第一个开始时间对比
      if (this.form.startTime1 === null || this.form.startTime1.length === 0) {
        this.$refs.startTime1.validate()
        return true
      }

      const startStr1 = `${preifx}${this.form.startTime1}${suffix}`
      const startTime1 = new Date(startStr1)
      if (endTime4.getTime() - startTime1.getTime() > 3600000 * 24) {
        return '同一个轮班的总时长不允许超过24时'
      }
      this.$refs.startTime1 && this.$refs.startTime1.resetValidation()

      return true
    },

    // 重置验证
    resetValidate (val) {
      this.$refs[val].validate()
    }
  }
}
</script>

<style scoped lang="stylus">
  .field {
    /deep/ .q-field__messages {
      margin-left 25px
    }
  }
  /deep/ .q-select__dropdown-icon {
    width 24px
    height 24px
    font-size 24px
    color rgba(0, 0, 0, .54)
  }
  .text {
    font-size 16px
    width 100px
    color #333
    margin-left 28px
    padding-bottom 20px
  }
  .dialog{
    .dialog-title{
      padding 12px 16px
      line-height 1
      font-size 18px
    }
    .dialog-content{
      .name{
        font-size 16px
        display inline-block
        width 80px
      }
    }
  }
</style>
